<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		.box1{
			background: skyblue;
		}
		.box2{
			color: pink;
		}
		.main{
			font-size: 30px;
		}
	</style>
</head>
<body>
	<ul>
		<li id="first">1</li>
		<li>2元素</li>
		<li id="three">3元素</li>
		<li>4元素</li>
		<li aaa="456">5</li>
		<li>
			<span>666666</span>
			<span>77777777</span>
			<span>888888</span>
		</li>
	</ul>


	<div class="main">first</div>
	<div>second</div>
	<div>third</div>
	<button>添加box1</button>
	<button>移除box1</button>
	<button>添加box2</button>
	<button>切换类</button>
	<button>判断类</button>


	<script type="text/javascript" src="../jquery-3.2.1.js"></script>
	<script type="text/javascript">
		//css
		//一条一条加
		$('li').css("background","pink")
		.css("color", "yellow")

		//多条加
		$('li').css({
			"list-style":"none",
			"font-size":"30px"
		})

		//class============================
		$('button').eq(0).click(() => {
			//添加类名 addClass 会保留原来的类名
			$('div').addClass("box1")
		})

		$('button').eq(1).click(() => {
			//移除类名 removeClass 
			$('div').removeClass("box1")
		})

		$('button').eq(2).click(() => {
			//添加类名 addClass 会保留原来的类名
			$('div').addClass("box2")
		})

		$('button').eq(3).click(() => {
			//切换类名 toggleClass 判断有没有这个类，有就移除，没有就添加
			$('div').toggleClass("box1 box2")
		})

		$('button').eq(4).click(() => {
			//判断类名  hasClass 返回布尔值 true/false
			console.log($('div').hasClass("box1 box2"))
			
		})
	</script>
</body>
</html>